<template>
  <el-form-item label="设置图片">
    <div class="form-img" @click="handleUploadImg">
      <div class="has-img" v-if="editorForm.src.value">
        <img :src="editorForm.src.value" alt="" />
        <span @click.stop="handleRemoveImg">
          <el-icon>
            <Delete />
          </el-icon>
        </span>
      </div>
      <el-icon v-else>
        <Plus />
      </el-icon>
    </div>
    <FilesUpload v-model:showDialog="showImageUpload" :limit="1" @getFileList="handleGetCoverImg" />
  </el-form-item>
</template>

<script setup>
import { ref, inject, watch } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

const { editorForm, backUpdate } = inject('commonForm')
watch(() => editorForm.value.src.value, () => {
  backUpdate()
})
// 图片设置
const showImageUpload = ref(false)
const handleUploadImg = () => {
  showImageUpload.value = true
}

const handleGetCoverImg = imgList => {
  if (imgList.length === 0) return
  editorForm.value.src.value = imgList[0].url
}

// 移除图片
const handleRemoveImg = () => {
  editorForm.value.src.value = ''
}
</script>

<style lang="scss" scoped></style>
